<template>
  <!--  <el-tabs type="border-card" @tab-click="handleClick">-->
  <!--    <el-tab-pane label="常用软件" name="type0"-->
  <!--      ><ImageTable :list="list"-->
  <!--    /></el-tab-pane>-->
  <!--    <el-tab-pane label="影音软件" name="type1"-->
  <!--      ><ImageTable :list="list"-->
  <!--    /></el-tab-pane>-->
  <!--    <el-tab-pane label="桌面图标" name="type2"-->
  <!--      ><ImageTable :list="list"-->
  <!--    /></el-tab-pane>-->
  <!--  </el-tabs>-->
  <div>
    <div style="width: 60%;margin: 0 auto;text-align: left;">
      <span
        style="font-size: 48px; display: inline-block;vertical-align: middle;width: 20%"
        @click="down"
        >米铺优选</span
      >
      <div
        style="display: inline-block;vertical-align: middle;width: 80%;text-align: center"
      >
        <el-image
          src="/api/image/gg.png"
          style="height: 100%;cursor: pointer"
          fit="fill"
          @click="hrefToTbao"
        />
      </div>
    </div>
    <el-row
      style="width: 60%;
  margin: 0 auto;"
    >
      <el-col :span="8">
        <el-table
          :data="appType0"
          border
          style="width: 100%;"
          @row-dblclick="tableClick"
        >
          <el-table-column label="常用软件">
            <template slot="header">
              <span style="display: inline-block">常用软件</span>
              <el-upload
                style="display: inline-block"
                :action="orgin + '/app/apk'"
                :headers="upheader"
                :limit="1"
                :on-success="onSuccess"
              >
                <el-button size="small" type="primary">上传apk</el-button>
              </el-upload>
            </template>
            <template slot-scope="scope">
              <OrderNumber
                :id="scope.$index + 1"
                :okey="scope.row.id"
              ></OrderNumber>
              <div
                style="margin-left:10px;display:inline-block;vertical-align: middle"
              >
                <el-image
                  style="width: 50px; height: 50px;"
                  :src="orgin + '/image/' + scope.row.logo"
                  fit="cover"
                ></el-image>
              </div>
              <div
                style="padding-left: 14px; display:inline-block;vertical-align: middle;margin-top: -10px"
              >
                <span>{{ scope.row.name }}</span>
                <el-button
                  style="margin-left: 14px"
                  type="text"
                  class="button"
                  @click="remove(scope.row)"
                  >删除</el-button
                >
                <div class="bottom clearfix">
                  <time class="time">{{
                    timestampToTime(scope.row.postdate)
                  }}</time>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table></el-col
      >
      <el-col :span="8">
        <el-table
          :data="appType1"
          border
          style="width: 100%;"
          @row-dblclick="tableClick"
        >
          <el-table-column label="影音软件">
            <template slot-scope="scope">
              <OrderNumber
                :id="scope.$index + 1"
                :okey="scope.row.id"
              ></OrderNumber>

              <div
                style="margin-left:10px;display:inline-block;vertical-align: middle"
              >
                <el-image
                  style="width: 50px; height: 50px;"
                  :src="orgin + '/image/' + scope.row.logo"
                  fit="cover"
                ></el-image>
              </div>
              <div
                style="padding-left: 14px; display:inline-block;vertical-align: middle;margin-top: -10px"
              >
                <span>{{ scope.row.name }}</span>
                <el-button
                  style="margin-left: 14px"
                  type="text"
                  class="button"
                  @click="remove(scope.row)"
                  >删除</el-button
                >
                <div class="bottom clearfix">
                  <time class="time">{{
                    timestampToTime(scope.row.postdate)
                  }}</time>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="8">
        <el-table
          :data="appType2"
          border
          style="width: 100%;"
          @row-dblclick="tableClick"
        >
          <el-table-column label="桌面图标">
            <template slot-scope="scope">
              <OrderNumber
                :id="scope.$index + 1"
                :okey="scope.row.id"
              ></OrderNumber>

              <div
                style="margin-left:10px;display:inline-block;vertical-align: middle"
              >
                <el-image
                  style="width: 50px; height: 50px;"
                  :src="orgin + '/image/' + scope.row.logo"
                  fit="cover"
                ></el-image>
              </div>
              <div
                style="padding-left: 14px; display:inline-block;vertical-align: middle;margin-top: -10px"
              >
                <span>{{ scope.row.name }}</span>
                <el-button
                  style="margin-left: 14px"
                  type="text"
                  class="button"
                  @click="remove(scope.row)"
                  >删除</el-button
                >
                <div class="bottom clearfix">
                  <time class="time">{{
                    timestampToTime(scope.row.postdate)
                  }}</time>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
//import ImageTable from "@/components/ImageTable";
//import app from "@/store/app";
import router from "@/router";
import OrderNumber from "@/components/OrderNumber";
import { apk, getAppByType, removeApp } from "@/api/app";
import { getToken, removeToken } from "@/utils/authToken";
import ElementUI from "element-ui";

export default {
  name: "Home",
  components: { OrderNumber },
  data: function() {
    return {};
  },
  methods: {
    tableClick(row) {
      router.push({ name: "AppEdit", params: { data: row } });
    },
    timestampToTime(row) {
      const date = new Date(row); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      const Y = date.getFullYear() + "-";
      const M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      const D = date.getDate() + " ";
      const h = date.getHours() + ":";
      const m = date.getMinutes() + ":";
      const s = date.getSeconds();
      return Y + M + D + h + m + s;
    },
    hrefToTbao() {
      window.location.href = "https://mipuyouxuan.taobao.com/";
    },
    remove(row) {
      removeApp(row.id).then(
        setTimeout(() => {
          getAppByType(row.type).then(res => {
            this.$store.dispatch("set_appdata", { item: res, type: row.type });
          });
        }, 2000)
      );
    },
    onSuccess(response) {
      if (response.code !== 200) {
        ElementUI.Message({
          message: response.message,
          type: "error"
        });
        // 401:未登录;
        if (response.code === 401) {
          router.push({ path: "/login" });
          return;
          //location.reload(); // 为了重新实例化vue-router对象 避免bug
          //location.assign("http://localhost/login");
        }
        return;
      }
      router.push({ name: "AppEdit", params: { data: response.data } });
      setTimeout(() => {
        getAppByType(0).then(res => {
          this.$store.dispatch("set_appdata", { item: res, type: 0 });
        });
      }, 2000);
    },
    onerror(err) {
      this.$message({
        message: err,
        type: "error"
      });
    },
    postApk(param) {
      const formData = new FormData();
      formData.append("file", param.file);
      apk(formData).then({
        //router.push({ name: "AppEdit", params: { data: data } });
      });
      setTimeout(() => {
        getAppByType(0).then(res => {
          this.$store.dispatch("set_appdata", { item: res, type: 0 });
        });
      }, 2000);
    },
    down() {
      removeToken();
      router.push("/");
    }
  },
  created() {},
  computed: {
    appType0() {
      return this.$store.getters.getAppType0;
    },
    orgin() {
      return this.$store.state.orgin;
    },
    appType1() {
      return this.$store.getters.getAppType1;
    },
    appType2() {
      return this.$store.getters.getAppType2;
    },
    upheader() {
      return { Authorization: getToken() };
    }
  }
};
</script>
